<template>
  <div class="component-base-config">
    <div
      class="content-pad-item__title with-tag"
      :class="{ 'is-open': backgroundContentVisible }"
      @click.stop="changeVisible"
    >
      背景与边框
    </div>
    <el-collapse-transition>
      <div v-show="backgroundContentVisible" style="margin-top: 8px">
        <div class="row-grid">
          <p>填充色</p>
          <el-color-picker v-model="background.color" />
          <el-input
            v-model="background.color"
            :maxlength="6"
            style="width: 100px; margin-left: 8px"
          />
        </div>
        <div class="row-grid">
          <p>透明度</p>
          <el-slider
            v-model="background.opacity"
            :max="1"
            :step="0.01"
            :show-tooltip="false"
            :show-input-controls="false"
            input-size="mini"
            style="width: 100%"
            show-input
          />
        </div>
        <div class="row-grid">
          <p>边框</p>
          <el-color-picker v-model="background.borderColor" />
          <el-select v-model="background.borderStyle" style="margin-left: 8px">
            <el-option value="solid">
              <span
                style="
                  display: inline-block;
                  width: 100%;
                  height: 0;
                  border-bottom: 1px solid #cccccc;
                "
              ></span>
            </el-option>
            <el-option value="double">
              <span
                style="
                  display: inline-block;
                  width: 100%;
                  height: 4px;
                  border-top: 1px solid #cccccc;
                  border-bottom: 1px solid #cccccc;
                "
              ></span>
            </el-option>
            <el-option value="dashed">
              <span
                style="
                  display: inline-block;
                  width: 100%;
                  height: 0;
                  border-bottom: 1px dashed #cccccc;
                "
              ></span>
            </el-option>
          </el-select>
          <el-input-number
            v-model="background.borderWidth"
            :min="0"
            :max="20"
            :step="1"
            :precision="0"
            style="margin-left: 8px"
            controls-position="right"
          />
        </div>
        <div class="row-grid">
          <p>边框透明度</p>
          <el-slider
            v-model="background.borderOpacity"
            :max="1"
            :step="0.01"
            :show-tooltip="false"
            :show-input-controls="false"
            input-size="mini"
            style="width: 100%"
            show-input
          />
        </div>
        <div class="row-grid">
          <p>圆角</p>
          <el-slider
            v-model="background.borderRadius"
            :min="0"
            :max="100"
            :step="1"
            :show-tooltip="false"
            :show-input-controls="false"
            input-size="mini"
            style="width: 100%"
            show-input
          />
        </div>
        <div class="row-grid">
          <p>阴影颜色</p>
          <el-color-picker v-model="background.shadowColor" />
        </div>
        <div class="row-grid">
          <p>X轴偏移</p>
          <el-input-number
            v-model="background.shadowX"
            :min="-100"
            :max="200"
            :step="1"
            :precision="0"
            controls-position="right"
          />
        </div>
        <div class="row-grid">
          <p>Y轴偏移</p>
          <el-input-number
            v-model="background.shadowY"
            :min="-100"
            :max="200"
            :step="1"
            :precision="0"
            controls-position="right"
          />
        </div>
        <div class="row-grid">
          <p>虚化距离</p>
          <el-input-number
            v-model="background.shadowBlur"
            :min="0"
            :max="200"
            :step="1"
            :precision="0"
            controls-position="right"
          />
        </div>
        <div class="row-grid">
          <p>扩散距离</p>
          <el-input-number
            v-model="background.shadowDiff"
            :min="0"
            :max="200"
            :step="1"
            :precision="0"
            controls-position="right"
          />
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
import { objectDeepClone } from '../../../untils/commonUtils';
export default {
  name: 'MBackground',
  props: {
    config:{
      type:Object
    },
  },
  data(){
    return{
      background:{},
      backgroundContentVisible:false
    }
  },
  computed: {
    acComponent(){
      return this.$store.state.imageDragMoudules.acComponent;
    },
    acComponentId(){
      return this.$store.state.imageDragMoudules.acComponent.id;
    }
  },
  methods:{
    changeVisible(){
      this.backgroundContentVisible = !this.backgroundContentVisible;
    }
  },
  watch:{
    //监听当前激活状态得id信息
    acComponentId:{
      handler(newVal, oldVal) {
        console.log("背景-激活：",newVal);
        !!newVal && objectDeepClone(this.background, this.acComponent.background);
        this.backgroundContentVisible= false;
      },
      deep: true,
      immediate: true
    },
    background:{
      handler(newVal, oldVal) {
        this.$store.commit('updateComponent', {
          newState: this.background,
          key: 'background',
        })
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style scoped>
.config-form-item + .config-form-item {
  margin-top: 8px;
}
</style>
